<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百叶窗</title>
    <style>
        @media (max-width: 680px) {
        .container {
          width: 100vw;
        }
        .panel:nth-of-type(4),
        .panel:nth-of-type(5) {
          display: none;
        }
      }

        body {
            background-color: pink;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            height: 100vh;
        }

        .container {
            width: 90vw;
            /* border: 1px solid red; */
            display: flex;
        }

        .panel {
            /* width: 80vw; */
            height: 80vh;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            border-radius: 50px;
            margin: 8px;
            flex: 0.5;
            overflow: hidden;
            transition: all 0.5s ease;
            cursor: pointer;
        }

        .panel.active {
            flex: 5;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="panel" style="background-image: url('./imgs/photo_1.jpg');"></div>
        <div class="panel" style="background-image: url('./imgs/photo_2.jpg');"></div>
        <div class="panel" style="background-image: url('./imgs/photo_3.jpg');"></div>
        <div class="panel" style="background-image: url('./imgs/photo_4.jpg');"></div>
        <div class="panel" style="background-image: url('./imgs/photo_5.jpg');"></div>
    </div>

    <script>
        let boxs = document.querySelectorAll(".panel");
        
        /* boxs.forEach((box) => {
            box.addEventListener("click", function () {
                let boxNot = document.querySelectorAll(".panel:not(.active)");
                boxNot.forEach(function(ele){
                    ele.classList.remove("active");
                });
                this.classList.toggle("active");
            });
        }); */

        boxs.forEach((box) => {
            box.addEventListener("click", ()=>{
                box.classList.toggle("active");
                boxs.forEach((ele)=>{
                    if(box != ele) ele.classList.remove("active");
                });
            });
        });
        
        /* for(let i = 0; i < boxs.length; i++){
            boxs[i].addEventListener("click", function (e) {
                this.classList.toggle("active");
                for(let j = 0; j < boxs.length; j++){
                    if(i === j) continue;
                    boxs[j].classList.remove("active");
                }
            });
        } */
    </script>
</body>

</html>